import React, { Component } from 'react'
import './index.scss'
import axios from '../../components/axios'
import { NavLink } from 'react-router-dom'

export default class index extends Component {
    constructor(props){
        super(props)
        this.state={
            data:[],
            len:0,
            time:"",
            operationHours:"",
            pageviews:"0"
        }
        axios("time"
        ).then(result=>{
            this.setState({time:result.data.time});
        }).catch(err=>{
            console.log(err);
        })
        axios("pageviews"
        ).then(result=>{
            this.setState({pageviews:result.data.num});
        }).catch(err=>{
            console.log(err);
        })
        setInterval(this.interval, 1000);
    }
    componentDidMount(){
        axios("blog",{"limit":1}
        ).then(result=>{
            this.setState({data:result.data.resData,len:result.data.page});
        }).catch(err=>{
            console.log(err);
        })
    }
    interval=()=>{
        var startTime = this.state.time;
        var calculationTime = (()=>{
            var s1 = new Date(startTime),
            s2 = new Date(),
            runTime = parseInt((s2.getTime() - s1.getTime()) / 1000);
            var year = Math.floor(runTime / 86400 / 365);
            runTime = runTime % (86400 * 365);
            var month = Math.floor(runTime / 86400 / 30);
            runTime = runTime % (86400 * 30);
            var day = Math.floor(runTime / 86400);
            runTime = runTime % 86400;
            var hour = Math.floor(runTime / 3600);
            runTime = runTime % 3600;
            var minute = Math.floor(runTime / 60);
            runTime = runTime % 60;
            var second = runTime;
            return `${year?year+"年":""}${month?month+"月":""}${day?day+"日":""}${hour?hour+"时":""}${minute?minute+"分":""}${second?second+"秒":""}`
        })()
        this.setState({operationHours:calculationTime})
    }
    render() {
        return (
            <div className="sidebar">
                <div className="sidebar-user">
                    <div className="sidebar-user-portrait">
                        <img src="../head-portrait.png" ></img>
                    </div>
                    <p>思佳人</p>
                    <span>javascript、前端、Mysql</span>
                    <NavLink to="/index"></NavLink>
                    <NavLink to="/tags"></NavLink>
                </div>
                <div className="sidebar-new">
                    <h2>最新文章</h2>
                    {this.state.data.map((item,index)=>{
                        return (
                            <div>
                                <NavLink to={`/content/${item.id}`}>
                                <h2 className="article-title">{item.title}</h2>
                                <span className="article-time">{item.changeTime}</span>
                                </NavLink>
                            </div>
                        )
                    })}
                </div>
                <div className="sidebar-information">
                    <h2>网站咨询</h2>
                    <div>
                        <p>
                            文章数目 :{this.state.len}
                        </p>
                        <p>
                            已运行时间 :{this.state.operationHours}
                        </p>
                        <p>
                            本站总访问量 :{this.state.pageviews}
                        </p>
                    </div>
                </div>
            </div>
        )
    }
}
